<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			#tag-gushiwen-list-scroll-wrapper{
				top:90px;
			}
			.fixed-next-header{
				position: fixed;
				top: 44px;
				left: 0;
				right: 0;
				height: 45px;
				background-color: white;
				box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				line-height: 45px;
				padding-left: 1rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">诗文列表</h1>
			<!-- <a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id='pop-filter-panel'>筛选</a> -->
		</header>
		<div class="mui-content">
			<div class="fixed-next-header" id='pop-filter-panel'>
				<span class="mui-btn-link">点击筛选</span> :<span id="filter-words-show"></span>
			</div>
			<div id='tag-gushiwen-list-scroll-wrapper' class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="mui-card xq-no-margin">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media large" id="tag-gushiwen-tag-info" v-cloak>
							<img :src="tagImg" class="xq-circle-img" />
							<div class="mui-media-body">
								<div>{{tagName}}</div>
								<p>过滤词:<span>{{filterWord}}</span></p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul id='tag-shiwen-list-ul' class="mui-table-view" v-cloak>
								<li v-for="(itemInfo,index) in shiwenList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
									<a>
										<div class="mui-media-body">
											<div class="xq-media-body-title-line">
												<div class="left-title">{{itemInfo.title}}</div>
												<div class="right-title">[{{itemInfo.dynasty}}] {{itemInfo.writer}}</div>
											</div>
											<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.shortContent}}</div>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mui-input-group xq-fixed-to-header init-hidden-to-top" id="filter-panel-content">
			<div class="mui-input-row">
				<label>作者</label>
				<input type="text" class="mui-input-clear" v-model="writer" placeholder="作者姓名">
			</div>
			<div class="mui-input-row">
				<label>关键词</label>
				<input type="text" class="mui-input-clear" v-model="titleTypeContent" placeholder="诗文关键词">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary func-confirm-btn">确认</button>
				<button type="button" class="mui-btn mui-btn-danger func-cancel-btn">取消</button>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/shiwenListLoader.js"></script>
		<script src="../js/allShiwenListPageManager.js"></script>
		<script type="text/javascript">
			mui.init();
			//
			mui.ready(function(e) {
				if (mui.os.plus) {
					return;
				}
				initTagGushiwenListPageInfo();
			});
			//
			mui.plusReady(function(e) {
				var self = plus.webview.currentWebview();
				initTagGushiwenListPageInfo()
			});

			function initTagGushiwenListPageInfo() {
				//SettingInfoManager.regiserPageAndSetPageFontFromSetting("allGushiwenList",$('body'));
				SettingInfoManager.setPageFontFromSetting();
				var pageManager = new AllShiwenListPageManager();
				pageManager.init({});
			}
		</script>
	</body>

</html>
